<template>
  <view class="order-detail-page">
    <view class="top-space"></view>
    
    <view class="content">
      <!-- 用户信息和价格 -->
      <view class="user-info">
        <view class="user">
          <view class="avatar" :style="avatarStyle(order)">{{ (order.username || '').slice(0,1) }}</view>
          <view class="username">{{ order.username }}</view>
        </view>
        <view class="price">￥{{ order.price }}</view>
      </view>
      
      <!-- 图片展示区域 -->
      <view class="image-container" v-if="order.image">
        <image 
          class="detail-image" 
          :src="order.image" 
          mode="widthFix"
          @click="previewImage(order.image)"
        ></image>
      </view>
      
      <!-- 标题 -->
      <view class="title">{{ order.title }}</view>
      
      <!-- 订单状态 -->
      <view class="status-section">
        <view class="status-label">订单状态</view>
        <view class="order-status" :class="order.statusClass">{{ order.status }}</view>
      </view>
      
      <!-- 详细信息 -->
      <view class="description">
        <text class="desc-text">（演示）{{ order.title }}。订单详情可以在这里展示更详细的任务描述、地点、时间和注意事项。</text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="actions">
        <button 
          v-if="order.type === 'published'" 
          class="revoke-btn" 
          @click="revokeOrder"
        >
          撤销发布
        </button>
        <button 
          v-else 
          class="delete-btn" 
          @click="deleteOrder"
        >
          删除记录
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: {
        id: 1,
        title: '',
        username: '',
        price: 0,
        image: '',
        status: '',
        statusClass: '',
        type: '' // 添加订单类型字段
      }
    }
  },
  
  onLoad(options) {
    // 获取传递的参数
    if (options.orderData) {
      const orderData = JSON.parse(decodeURIComponent(options.orderData || '{}'))
      this.order = orderData
    } else {
      // 默认数据用于演示
      this.order = {
        id: 1,
        title: '帮忙照看宠物一整天',
        username: '李阿姨',
        price: 50,
        image: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=800&q=60',
        status: '已完成',
        statusClass: 'completed',
        type: 'published' // 默认为发布的订单
      }
    }
  },
  
  methods: {
    /* --- 头像样式辅助 --- */
    avatarStyle(order) {
      // 可以根据 username 或其他字段生成不同的背景
      if (!order.username) return {}
      const colors = [
        'linear-gradient(135deg,#6dd5ed 0%,#2193b0 100%)',
        'linear-gradient(135deg,#f6d365 0%,#fda085 100%)',
        'linear-gradient(135deg,#a1c4fd 0%,#c2e9fb 100%)',
        'linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%)'
      ]
      const index = order.username.charCodeAt(0) % colors.length
      return {
        background: colors[index],
        color: '#fff'
      }
    },
    
    /* 撤销发布订单 */
    revokeOrder() {
      uni.showModal({
        title: '确认撤销',
        content: '确定要撤销发布这条订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 在真实应用中应调用 API 撤销订单发布
            uni.showToast({ 
              title: '订单已撤销', 
              icon: 'success',
              success: () => {
                // 返回上一页
                setTimeout(() => {
                  uni.navigateBack()
                }, 1000)
              }
            })
          }
        }
      })
    },
    
    /* 删除订单记录 */
    deleteOrder() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条订单记录吗？',
        success: (res) => {
          if (res.confirm) {
            // 在真实应用中应调用 API 删除订单
            uni.showToast({ 
              title: '记录已删除', 
              icon: 'success',
              success: () => {
                // 返回上一页
                setTimeout(() => {
                  uni.navigateBack()
                }, 1000)
              }
            })
          }
        }
      })
    },
    
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl]
      })
    }
  }
}
</script>

<style scoped>
.order-detail-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
  box-sizing: border-box;
}

/* 顶部占位：让页面内容不被原生 titleNView 覆盖 */
.top-space {
  height: 54px;
  width: 100%;
}

.content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 用户信息和价格 */
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

.user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.username {
  font-size: 16px;
  font-weight: 700;
  color: #16202b;
}

.price {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 图片容器 */
.image-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

.detail-image {
  width: 100%;
  display: block;
}

/* 标题 */
.title {
  font-size: 20px;
  font-weight: 700;
  color: #16202b;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

/* 订单状态 */
.status-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
}

.status-label {
  font-size: 14px;
  color: #8b94a6;
  margin-bottom: 8px;
}

.order-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.pending {
  background: #fff3cd;
  color: #856404;
}

.in-progress {
  background: #cce5ff;
  color: #004085;
}

.completed {
  background: #d4edda;
  color: #155724;
}

.in-arbitration {
  background: #f8d7da;
  color: #721c24;
}

/* 详细信息 */
.description {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
  flex: 1;
}

.desc-text {
  color: #465360;
  line-height: 1.6;
  font-size: 15px;
}

/* 操作按钮 */
.actions {
  display: flex;
  gap: 12px;
  padding: 16px 0;
}

.delete-btn, .revoke-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
}

.delete-btn {
  background: #f8d7da;
  color: #721c24;
}

.revoke-btn {
  background: #fff3cd;
  color: #856404;
}
</style>